<template>
  <a-card :bordered="false">
    <component @onEdit="handleEdit" @onGoBack="handleGoBack" :record="record" :is="currentComponet"></component>
  </a-card>
</template>

<script>
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
// 动态切换组件
import List from '@/views/list/table/List'
import Edit from '@/views/list/table/Edit'

export default {
    name: 'TableListWrapper',
    components: {
        AInput,
        ATextarea,
        List,
        Edit
    },
    data() {
        return {
            currentComponet: 'List',
            record: ''
        }
    },
    created() {},
    methods: {
        handleEdit(record) {
            this.record = record || ''
            this.currentComponet = 'Edit'
            console.log(record)
        },
        handleGoBack() {
            this.record = ''
            this.currentComponet = 'List'
        }
    },
    watch: {
        '$route.path'() {
            this.record = ''
            this.currentComponet = 'List'
        }
    }
}
</script>
